<template>
    <div class="board-content">
        <div class="board-body">
            <div class="board-header">
                <div class="board-title">
                    {{ title }}
                </div>
                <div class="board-tabs">
                    <el-tabs v-model="active" type="card">
                        <el-tab-pane label="基本信息" name="first">
                            <div class="board-main">
                                <el-form v-if="info" ref="form" class="board-form board-config" label-width="220px">
                                    <el-form-item label="乡镇街道：">{{ info.street_text }}</el-form-item>
                                    <el-form-item label="社区：">{{ info.community }}</el-form-item>
                                    <el-form-item label="小区：">{{ info.village }}</el-form-item>
                                    <el-form-item label="特殊楼栋：">{{ info.special_text }}</el-form-item>
                                    <el-form-item label="楼栋：">{{ info.building }}</el-form-item>
                                    <el-form-item label="高层建筑名称：">{{ info.name }}</el-form-item>
                                    <el-form-item label="详细地址：">{{ info.address }}</el-form-item>
                                    <el-form-item label="建筑照片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="建筑面积：">{{ info.area }}</el-form-item>
                                    <el-form-item label="地上楼层：">{{ info.ground }}</el-form-item>
                                    <el-form-item label="吊层楼层：">{{ info.layer }}</el-form-item>
                                    <el-form-item label="地下楼层：">{{ info.underground }}</el-form-item>
                                    <el-form-item label="高度：">{{ info.height }}</el-form-item>
                                    <el-form-item label="建筑定性：">{{ info.nature_text }}</el-form-item>
                                    <el-form-item label="建筑内使用功能：">
                                        <span v-for="(shape,k) in shapes" :key="k">
                                            <span v-for="(s,ik) in info.shape" :key="ik">
                                                {{ k == s ? shape + '、' : '' }}
                                            </span>
                                        </span>
                                    </el-form-item>
                                    <el-form-item label="建成年代：">{{ info.year }}</el-form-item>
                                    <el-form-item label="消防安全管理形式：">{{ info.form_text }}</el-form-item>
                                    <el-form-item label="管理主体：">{{ info.body }}</el-form-item>
                                    <el-form-item label="消防安全管理人：">{{ info.person }}</el-form-item>
                                    <el-form-item label="管理人是否是注册消防工程师：">{{ info.sfpe_text }}</el-form-item>
                                    <el-form-item label="联系电话：">{{ info.mobile }}</el-form-item>
                                    <el-form-item label="有无维保单位：">{{ info.maintenance_text }}</el-form-item>
                                    <el-form-item label="维保单位名称：">{{ info.company }}</el-form-item>
                                    <el-form-item label="大修基金情况：">{{ info.fund_text }}</el-form-item>
                                    <el-form-item label="治理重点对象标签：">{{ info.keynote_text }}</el-form-item>
                                    <el-form-item label="建筑外墙外保温材料：">{{ info.warm_text }}</el-form-item>
                                    <el-form-item label="排查地址：">{{ info.p_address }}</el-form-item>
                                    <el-form-item label="排查人：">{{ info.p_person }}</el-form-item>
                                    <el-form-item label="排查时间：">{{ info.p_time }}</el-form-item>
                                </el-form>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="隐患信息" name="second">
                            <div class="board-main">
                                <el-form v-if="info" ref="form" class="board-form board-config" label-width="340px">
                                    <el-form-item label="是否存在可燃雨棚：">{{ info.rainshed_text }}</el-form-item>
                                    <el-form-item label="存在可燃雨棚图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.rainshed_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="是否存在违规设置突出外墙防护网现象：">{{ info.wall_text }}</el-form-item>
                                    <el-form-item label="存在违规设置突出外墙防护网现象图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.wall_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="是否存在电动自行车违规停放充电现象：">{{ info.bicycle_text }}</el-form-item>
                                    <el-form-item label="存在电动自行车违规停放充电图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.bicycle_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="消防车道、消防车救援场地是否按要求设置标志标牌、施划标线：">{{
                                            info.sign_text
                                        }}
                                    </el-form-item>
                                    <el-form-item label="消防车道、消防车救援场地未按要求设置标志标牌、施划标线图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.sign_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="消防车通道情况：">{{ info.channel_text }}</el-form-item>
                                    <el-form-item label="消防车通道情况隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.channel_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="建筑内疏散通道、安全出口：">{{ info.speak_text }}</el-form-item>
                                    <el-form-item label="建筑内疏散通道、安全出口隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.speak_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="火灾自动报警系统设置情况：">{{ info.fire_text }}</el-form-item>
                                    <el-form-item label="火灾自动报警系统功能情况：">{{ info.fire_use_text }}</el-form-item>
                                    <el-form-item label="火灾自动报警系统隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.fire_use_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="室内消火栓系统设置情况：">{{ info.hydrant_text }}</el-form-item>
                                    <el-form-item label="室内消火栓系统功能情况：">{{ info.hydrant_use_text }}</el-form-item>
                                    <el-form-item label="室内消火栓系统隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hydrant_use_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="室外消火栓系统设置情况：">{{ info.whydrant_text }}</el-form-item>
                                    <el-form-item label="室外消火栓系统功能情况：">{{ info.whydrant_use_text }}</el-form-item>
                                    <el-form-item label="室外消火栓系统隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.whydrant_use_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="自动喷水灭火系统设置情况：">{{ info.outfire_text }}</el-form-item>
                                    <el-form-item label="自动喷水灭火系统功能情况：">{{ info.outfire_use_text }}</el-form-item>
                                    <el-form-item label="自动喷水灭火系统隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.outfire_use_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="机械防、排烟系统设置情况：">{{ info.smoke_text }}</el-form-item>
                                    <el-form-item label="机械防、排烟系统功能情况：">{{ info.smoke_use_text }}</el-form-item>
                                    <el-form-item label="机械防、排烟系统隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.smoke_use_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="防火卷帘设置情况：">{{ info.shutter_text }}</el-form-item>
                                    <el-form-item label="防火卷帘功能情况：">{{ info.shutter_use_text }}</el-form-item>
                                    <el-form-item label="防火卷帘隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.shutter_use_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="气体灭火系统设置情况：">{{ info.gas_text }}</el-form-item>
                                    <el-form-item label="气体灭火系统功能情况：">{{ info.gas_use_text }}</el-form-item>
                                    <el-form-item label="气体灭火系统隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.gas_use_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="人员密集场所室内采易燃可燃材料装修：">{{ info.hidden1_text }}</el-form-item>
                                    <el-form-item label="人员密集场所室内存在采用易燃可燃材料装修图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="违规设置群租房：">{{ info.hidden2_text }}</el-form-item>
                                    <el-form-item label="存在违规设置群租房图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden2_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="搭建易燃可燃彩钢板：">{{ info.hidden3_text }}</el-form-item>
                                    <el-form-item label="存在搭建易燃可燃彩钢板图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden3_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="避难层（间）被占用或擅自改变用途：">{{ info.hidden4_text }}</el-form-item>
                                    <el-form-item label="存在避难层（间）被占用或擅自改变用途图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden4_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="违规储存、经营、使用易燃易爆危险品：">{{ info.hidden5_text }}</el-form-item>
                                    <el-form-item label="存在违规储存、经营、使用易燃易爆危险品图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden5_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="电气线路私拉乱接：">{{ info.hidden6_text }}</el-form-item>
                                    <el-form-item label="存在电气线路私拉乱接图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden6_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="电缆井内电气线路敷设不符合规范：">{{ info.hidden7_text }}</el-form-item>
                                    <el-form-item label="存在电缆井内电气线路敷设不符合规范图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden7_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="防火封堵 被破坏：">{{ info.hidden8_text }}</el-form-item>
                                    <el-form-item label="存在防火封堵 被破坏图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden8_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="违规使用瓶装液化气石油气：">{{ info.hidden9_text }}</el-form-item>
                                    <el-form-item label="存在违规使用瓶装液化气石油气图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden9_thumb" :key="index" class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="燃气管线用具敷设安装不规范：">{{ info.hidden10_text }}</el-form-item>
                                    <el-form-item label="存在燃气管线用具敷设安装不规范图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden10_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="消防控制室值班人员配备不到位：">{{ info.hidden11_text }}</el-form-item>
                                    <el-form-item label="存在消防控制室值班人员配备不到位图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden11_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="影响灭火救援的装饰、广告牌：">{{ info.hidden12_text }}</el-form-item>
                                    <el-form-item label="存在影响灭火救援的装饰、广告牌图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden12_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="配建车库违规改变使用功能：">{{ info.hidden13_text }}</el-form-item>
                                    <el-form-item label="存在配建车库违规改变使用功能图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden13_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="是否存在其他隐患：">{{ info.hidden14_text }}</el-form-item>
                                    <el-form-item label="存在其他隐患图片：">
                                        <div class="thumb-box">
                                            <div v-for="(img,index) in info.hidden14_thumb" :key="index"
                                                 class="img-box">
                                                <el-image :src="img.url" :preview-src-list="[img.url]"></el-image>
                                            </div>
                                        </div>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="board-form-button" style="padding: 100px 0;text-align: center">
                        <el-button @click="$router.back()" class="back">返 回</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {ArticleInfo} from "../../utils/request";
import {mapState} from "vuex";

export default {
    computed: {
        ...mapState({
            title: state => state.title,
        }),
    },
    data() {
        return {
            loading: false,
            info: null,
            active: 'first',
            shapes: [],
        }
    },
    activated() {
        let rid = this.$route.query.id;
        this.$store.dispatch('setState', {active: '/main'});
        this.detail(rid);
    },
    methods: {
        detail(id) {
            ArticleInfo({id: id}).then((res) => {
                if (res.status) {
                    this.$func.error(res.message);
                } else {
                    this.info = res.data.info;
                    this.shapes = res.data.shapes;
                }
                this.loading = false;
            }).catch((e) => {
                this.loading = false;
            });
        },
    },
}
</script>
<style>
.thumb-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.thumb-box .img-box {
    width: 50%;
    padding: 10px;
    height: 235px;
    display: inline-block;
    overflow: hidden;
}

.thumb-box .img-box img {
    width: auto;
    height: 235px;
}
/*.error*/
.el-form-item__content {
    /*color: red;*/
    font-weight: 700;
}
.el-form-item__label {

}
</style>
